<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/product.css">
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <div class="header_ul1">

            <ul>
                <img alt="" src="https://www.uniqlo.cn/public/Image/L1/nav/nav-logo/LOGO.gif">
                <li>
                    <a href="./register.html">注册</a>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="login.html">登录</a>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-wode"></i>
                        <span>账户</span>
                    </a>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-aixin"></i>
                        <span>收藏夹</span>
                    </a>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-gouwuche"></i>
                        <span>购物车</span>
                    </a>
                    <i></i>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-xinxi"></i>
                        <span>站内信</span>
                    </a>
                </li>
                <li class="spliter"></li>
                <li>
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-kefu"></i>
                        <span>联系客服</span>
                    </a>
                </li>
                <li class="spliter"></li>
                <li class="header_shop">
                    <a href="javascript:void(0)">
                        <i class="iconfont icon-mendian1"></i>
                        <span>门店购买</span>
                    </a>
                </li>
                <li class="spliter"></li>
                <li>
                    <div>
                        <i class="iconfont "></i>
                        <input type="text" id="search" placeholder="站内搜索" autocomplete="off">
                        <ul id="list">

                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="goshop">
            <div>
                <span>门店急送等服务仅支持手机端购买，欢迎扫码体验！</span>
            </div>
            <div class="goshop_left">
                <img class="left-image" src="./static/img/app-download.png">
                <span class="span-height">优衣库APP下载</span>
            </div>
            <div class="goshop_right">
                <img class="right-image" src="./static/img/wx-download.png">
                <span class="span-height">优衣库小程序登录</span>
            </div>
        </div>
        <div class="header_ul2">
            <ul class="header_ul21">
                <li class="nav-logo">
                    <a href="###">
                        <img alt="" src="https://www.uniqlo.cn/public/Image/L1/nav/nav-logo/LOGO.gif">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">女 装 WOMEN</a>
                </li>
                <li>
                    <a href="javascript:;">男 装 MEN</a>
                </li>
                <li>
                    <a href="javascript:;">童 装 KIDS</a>
                </li>
                <li>
                    <a href="javascript:;">婴 幼 儿 装 BABY</a>
                </li>
            </ul>
            <ul class="header_ul22">
                <li>
                    <a href="/notice.html#zctx" target="_blank">防诈骗公告</a>
                </li>
                <li>
                    <a href="/Shopping_Guide.html" target="_blank">网上购买指南</a>
                </li>
                <li>
                    <a href="javascript:void(0);">关注我们</a>
                </li>
                <li>
                    <a href="/notice.html" target="_blank">公告区</a>
                </li>
                <li>
                    <a href="/shop/shop_list.html" target="_blank">店铺资料</a>
                </li>
            </ul>
        </div>

    </header>
    <!-- 内容 -->
    <div class="content">
        <!-- 大图 -->
        <div class="content1">
            <img data-src="https://img.alicdn.com/imgextra/i1/196993935/O1CN019lGyTW1ewHB3DwvEV_!!196993935.jpg" src="https://img.alicdn.com/imgextra/i1/196993935/O1CN019lGyTW1ewHB3DwvEV_!!196993935.jpg">
        </div>
        <!-- 分类 -->
        <div class="content2">
            <div class="content2_pair">
                <div class="pair_left">
                    <span>WOMEN</span>
                </div>
                <div class="pair_right">
                    <span>MEN</span>
                </div>
            </div>
            <div class="content2_shop">
                <a href="javascript:;">
                    购买女装短袖T恤
                    <span>限时特优商品</span>
                    请点击
                </a>
            </div>
            <div>
                <ul class="content2_ul">
                    <li>人气推荐</li>
                    <li>合作系列</li>
                    <li>百搭T恤</li>
                    <li>罗文T恤</li>
                    <li>运动T恤</li>
                    <li>超值精选</li>
                </ul>
            </div>

        </div>
        <!-- 渲染页面 -->
        <div class="content3">
            <section>
                <div class="content3_title">
                    人气推荐
                </div>
                <div>
                    <ul class="list">
                        <!-- <li>
                            <div>
                                <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/main/first/561/1.jpg" alt="合作款女装 圆领T恤春夏短袖(“优衣库好感T” 纯棉) 435193" title="合作款女装 圆领T恤春夏短袖(“优衣库好感T” 纯棉) 435193">
                            </div>
                            <div style="margin: 5px;">
                                <div class="color_pic">
                                    <ul>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL21.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL24.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL51.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL65.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL71.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL00.jpg">
                                        </li>
                                        <li>
                                            <img class="picture-img" src="https://www.uniqlo.cn/hmall/test/u0000000022271/chip/22/COL09.jpg">
                                        </li>
                                    </ul>
                                </div>
                                <div class="p">
                                    <p>合作款女装</p>
                                    <span>XS-3XL</span>
                                </div>
                                <p>圆领T恤春夏短袖(“优衣库好感T” 纯棉) 435193</p>
                                <span style="color: black;font-weight: bold;">¥79.00</span>
                                <div>
                                    <span class="xingxing">
                                        <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                                        <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                                        <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                                        <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                                        <i class="iconfont icon-shixinxingxing" style="color: rgb(255, 208, 0);"></i>
                                    </span>
                                    <span>
                                        (12)
                                    </span>
                                </div>
                            </div>
                        </li> -->

                    </ul>
                </div>
            </section>
            <section>
                <div class="content3_title">
                    合作系列
                </div>
                <div>
                    <ul class="list2">

                    </ul>
                </div>
            </section>
        </div>
        <!-- 图片 -->
        <div class="content4_box">
            <div class="content4_img">
                <a href="javascript:void(0)">
                    <img data-src="https://www.uniqlo.cn/public/image/L3/women/outer/2020/02/1280_200221_airism01.jpg" src="https://www.uniqlo.cn/public/image/L3/women/outer/2020/02/1280_200221_airism01.jpg">
                </a>
            </div>
            <div class="content4_img">
                <a href="javascript:void(0)">
                    <img data-src="https://img.alicdn.com/imgextra/i2/196993935/O1CN01plfGg31ewHBRQJ5hw_!!196993935.jpg" src="https://img.alicdn.com/imgextra/i2/196993935/O1CN01plfGg31ewHBRQJ5hw_!!196993935.jpg">
                </a>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer_box">
            <div class="footer_nav">
                <ul>
                    <li>
                        <a href="/shop/shop_list.html" target="_blank">店铺资料</a>
                    </li>
                    <li>
                        <a href="http://event.uniqlo.cn/hrchina/recruitment/" rel="nofollow" target="_blank">招聘信息</a>
                    </li>
                    <li>
                        <a href="javascript:;">访问权限</a>
                    </li>
                    <li>
                        <a href="/privacy_policy.html" target="_blank">隐私权保护</a>
                    </li>
                </ul>
            </div>
            <div class="footer_webrecords">
                <div class="footer_img">
                    <a href="javascript:void(0);" rel="nofollow" target="_blank"><img width="62" height="74" src="https://www.uniqlo.cn/public/image/L1/2020/special/lz2.jpg"></a>
                    <img style="width:100px" src="https://www.uniqlo.cn/cms/ae70496c8d3e7e510f422c7a8c54b860.png">
                </div>
            </div>
        </div>
    </footer>
    <script src="../static/libs/javascripts/jQuery_min.js"></script>
    <script src="./javascripts/product.js"></script>
</body>

</html>